<template>
  <div id="chartFault" class="maxbox"></div>
</template>

<script>
let echarts = require("echarts");
export default {
    components: {},
    props: {},
    data() {
        return {
            chart: null
        };
    },
    created() { },
    mounted() {
        this.$nextTick(() => {
            this.creatChart();
        });
    },
    methods: {
        creatChart() {
            let option = {
                grid: {
                    left: '5%',
                    right: '10%',
                    bottom: '5%',
                    top: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    },
                    formatter: function(params) {
                        return params[0].name + '<br/>' +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                params[0].seriesName + ' : ' + Number((params[0].value.toFixed(2))).toLocaleString() + ' <br/>';
                    }
                },
                // backgroundColor: 'rgb(20,28,52)',
                xAxis: {
                    show: true,
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#9b9ba7'
                        }
                    }
                },
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#9b9ba7'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    /* axisLine: {
                        show: false
                    }, */
                    data: ['龙华', '南山', '罗湖', '福田', '宝安']
                }/*  {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff',
                            fontSize: '12'
                        },
                        formatter: function(value) {
                            if (value >= 10000) {
                                return (value / 10000).toLocaleString() + '万';
                            } else {
                                return value.toLocaleString();
                            }
                        }
                    },
                    data: [50000000, 22000000, 10000000, 5000000, 1]
                } */
                ],
                series: [
                    {
                        name: '故障',
                        type: 'bar',
                        zlevel: 1,
                        label: {
                            show: true,
                            position: 'right', // right 、 inside
                            textStyle: {
                                color: '#ffffff',
                                fontSize: '12'
                            }
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 30, 30, 0],
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgb(61,134,229,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(113,253,254,1)'
                                }])
                            }
                        },
                        barWidth: 12,
                        data: [500, 220, 100, 400, 30]
                    }
                /* {
                    name: '背景',
                    type: 'bar',
                    barWidth: 20,
                    barGap: '-100%',
                    data: [50000000, 50000000, 50000000, 50000000, 1],
                    itemStyle: {
                        normal: {
                            color: 'rgba(24,31,68,1)',
                            barBorderRadius: 30
                        }
                    }
                } */
                ]
            };

            this.chart = echarts.init(document.getElementById('chartFault'));
            this.chart.setOption(option);
        }
    }
};
</script>

<style lang="less">
.maxbox {
    height:150px;
}

</style>
